<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="https://unpkg.com/vue@3.5.13"></script>
</head>

<style>
  .demo {
    font-family: sans-serif;
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 20px 30px;
    margin-top: 1em;
    margin-bottom: 40px;
    user-select: none;
    overflow-x: auto;
  }
</style>

<body>
<div id="computed-basics" class="demo">
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</div>


<script>
  Vue.createApp({
    data() {
      return {
        author: {
          name: 'John Doe',
          books: ['Vue 2 - Advanced Guide',
            'Vue 3 - Basic Guide',
            'Vue 4 - The Mystery']
        }
      }
    },
    computed: {
      // a computed getter
      publishedBooksMessage() {
        // `this` points to the vm instance
        return this.author.books.length > 0 ? 'Yes' : 'No'
      }
    }
  }).mount('#computed-basics')
</script>
</body>
</html>